<template>
  <div class="mall-list">
    <nav-bar></nav-bar>
    <ul class="category-box">
      <li>
        <div class="title">价格</div>
        <div class="select">
          <a v-for="c in c1"
            :style="c.value == value.c1 ? 'color:#EFA901' : ''"
            href="javascript:;"
            @click="select(1,c)"
          >
            {{c.name}}
          </a>
        </div>
      </li>
      <!-- <li>
        <div class="title">折扣</div>
        <div class="select">
          <a v-for="c in c2"
            :style="c.value == value.c2 ? 'color:#EFA901' : 'color:#666'"
            href="javascript:;"
            @click="select(2,c)"
          >
            {{c.name}}
          </a>
        </div>
      </li>
      <li>
        <div class="title">规格</div>
        <div class="select">
          <a v-for="c in c3"
            :style="c.value == value.c3 ? 'color:#EFA901' : 'color:#666'"
            href="javascript:;"
            @click="select(4,c)"
          >
            {{c.name}}
          </a>
        </div>
      </li> -->
    </ul>
    <div class="list-main clearfix">
      <div class="list-left">
        <div class="xyd-container">
          <div class="xyd-c-title">
            <ul class="clearfix">
              <li @click="change('')" :style="desc === '' ? 'color:#00A2EA' : ''">综合排序</li>
              <li class="gray-line">|</li>
              <li @click="change('sold')" :style="desc === 'sold' ? 'color:#00A2EA' : ''">销量<i class="ion-arrow-down-c"></i></li>
              <li class="gray-line">|</li>
              <li @click="change('star')" :style="desc === 'star' ? 'color:#00A2EA' : ''">好评<i class="ion-arrow-down-c"></i></li>
              <li class="gray-line">|</li>
              <li @click="change('price')" >
                <span class="text" :style="desc === 'price' ? 'color:#00A2EA' : ''">价格</span>
                <span class="up-down-icon">
                  <i class="ion-chevron-up" :style="!priceDown && desc === 'price' ? 'color:#00A2EA' : ''"></i>
                  <i class="ion-chevron-down" :style="priceDown && desc === 'price' ? 'color:#00A2EA' : ''"></i>
                </span>
              </li>
              <li class="gray-line">|</li>
              <!-- <li class="input">
                <label for="">价格</label>
                <div><el-input size="small" style="width:60px;"></el-input></div>
                <span>-</span>
                <div><el-input size="small" style="width:60px;"></el-input></div>
              </li>
              <li class="gray-line">|</li> -->
              <!-- <li class="input">
                配送至
                <div><el-input size="small" style="width:60px;"></el-input></div>
              </li> -->
            </ul>
          </div>
          <div class="xyd-c-content" v-loading.body="loading">
            <no-content v-if="!loading && (!product || product.length === 0)" ></no-content>
            <ul>
              <good-item :value="item" v-for="item,i in product" :key="i"></good-item>
            </ul>
            <div class="pagination-container">
              <el-pagination
                v-if="product && product.length !== 0"
                :page-size="offset"
                layout="prev, pager, next"
                :total="total"
                :current-page="page"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="list-right">
        <div class="btn-group">
          <button class="yellow-btn" @click="goShopcar"><i class="ion-android-cart"></i>购物车</button>
          <button class="orange-btn" @click="goOrder"><i class="ion-android-list"></i>我的订单</button>
        </div>
        <div class="xyd-container">
          <div class="xyd-c-title">推广产品</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="item,i in recommend" :key="i">
                <book-item :value="item"></book-item>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getGoodList } from 'api/shop'
import BookItem from './bookItem.vue'
import GoodItem from './goodItem.vue'
import { NoContent } from 'components/Sit'

const now = new Date()
const nowY = now.getFullYear()
const catKey = ['price', 'star', 'discount', 'year']
// 销量排序：sold_desc
// 评分排序：star_desc
// 价格排序：price_desc

export default {
  name: 'list',
  components: {
    NavBar,
    BookItem,
    GoodItem,
    NoContent
  },
  data() {
    return {
      value: {
        c1: null,
        c2: null,
        c3: null,
        c4: null
      },
      c1: [
        { name: '0-19', value: 1 },
        { name: '19-39', value: 2 },
        { name: '39-149', value: 3 },
        { name: '149-309', value: 4 },
        { name: '309以上', value: 5 }
      ],
      c2: [
        { name: '3折以下', value: 1 },
        { name: '3-5折', value: 2 },
        { name: '5-7折', value: 3 },
        { name: '7折以上', value: 4 }
      ],
      c3: [
        { name: '小', value: 1 },
        { name: '中', value: 2 },
        { name: '大', value: 3 }
      ],
      recommend: [],
      loading: false,
      desc: '',
      product: [],
      page: 1,
      offset: 8,
      total: 0,
      priceDown: false
    }
  },
  created() {
    const { catid } = this.$route.query
    this.loading = true
    getGoodList({
      catid,
      page: this.page,
      offset: this.offset
    })
    .then(res => {
      this.loading = false
      this.recommend = res.data.recommend
      this.product = res.data.product
      this.total = res.data.page.last_page * this.offset
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    fetchData(params = {}) {
      const { catid } = this.$route.query
      this.loading = true
      getGoodList({
        catid,
        price: this.value.c1,
        page: this.page,
        offset: this.offset,
        // [`desc_${this.desc}`]: 1,
        ...params
      })
      .then(res => {
        this.loading = false
        this.product = res.data.product
        this.total = res.data.page.last_page * this.offset
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    select(n, val) {
      this.value['c' + n] = this.value['c' + n] === val.value ? null : val.value
      this.fetchData({
        [catKey[n - 1]]: this.value['c' + n]
      })
    },
    change(val) {
      if (val === 'price') {
        if (this.desc !== 'price') {
          this.priceDown = true
        } else {
          this.priceDown = !this.priceDown
        }
        this.desc = val
        this.fetchData({
          price_desc: this.desc === '' ? null : this.priceDown ? 1 : ''
        })
      } else {
        this.desc = val
        this.fetchData({
          [`${val}_desc`]: this.desc === '' ? null : 1
        })
      }
    },
    goShopcar() {
      this.$router.push('/mall/shopcar?type=1')
    },
    goOrder() {
      this.$router.push('/mall/order-list?type=1')
    },
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.mall-list{
  ul.category-box{
    width: 1200px;
    margin: 0 auto;
    border: 1px solid #e5e6e7;
    >li{
      &:last-child{
        border: 0;
      }
      .title{
        float: left;
        background-color: #f8f8f8;
        width: 210px;
        font-size: 16px;
        text-align: center;
        line-height: 38px;
        border-right: 1px solid #e5e6e7;
        height: 100%;
      }
      .select{
        float: left;
        line-height: 38px;
        color: #666;
        >a{
          margin: 0 20px;
          &:hover{
            color: #EFA901;
          }
        }
      }
      height: 40px;
      border-bottom: 1px solid #e5e6e7;
    }
  }
  .list-main{
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .list-left{
      float: left;
      width: 960px;
      margin-right: 30px;
      .xyd-container{
        .xyd-c-title{
          font-size: 14px;
          height: 50px;
          padding: 0 20px;
          >ul{
            >li{
              cursor: pointer;
              float: left;
              padding: 0 10px;
              .text{
                display: inline-block;
                vertical-align: middle;
              }
              .up-down-icon{
                display: inline-block;
                vertical-align: middle;
                line-height: 10px;
                >i{
                  display: block;
                  width: 15px;
                  height: 10px;
                  font-size: 12px;
                }
              }
              &.input{
                >div{
                  display: inline-block;
                }
              }
            }
          }
        }
        .xyd-c-content{
          min-height: 350px;
          >ul{
            padding: 0 40px;
          }
        }
      }
    }
    .list-right{
      float: left;
      width: 210px;
      .btn-group{
        text-align: center;
        margin-bottom: 10px;
        >button{
          font-size: 14px;
          line-height: 1.5;
          width: 100px;
          height: 30px;
        }
      }
      .xyd-container{
        .xyd-c-content{
          >ul{
            >li{
              &:last-child{
                border-bottom: 0;
              }
              padding: 10px 0;
              overflow: hidden;
              border-bottom: 1px solid #e5e6e7;
            }
          }
        }
      }
    }
  }
}
</style>